<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="dataList" :span-method="objectSpanMethod" >
      <el-table-column label="设备编号" align="center" prop="id" width="90" />
      <el-table-column label="设备名称" align="center" prop="deviceName" width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="周期" align="center" prop="cycle" width="80" />
      <el-table-column label="早班流量" align="center" prop="morningShift" :formatter="emptyIsZero" />
      <el-table-column label="中班流量" align="center" prop="middleShift" :formatter="emptyIsZero"/>
      <el-table-column label="晚班流量" align="center" prop="eveningShift" :formatter="emptyIsZero" />
      <el-table-column label="日流量" align="center" prop="day" :formatter="emptyIsZero" />
      <el-table-column label="月流量" align="center" prop="month" :formatter="emptyIsZero" />
      <el-table-column label="年流量" align="center" prop="year" :formatter="emptyIsZero" />
    </el-table>

  </div>
</template>

<script setup name="Contrast">
import { listDaily } from "@/api/coal/daily";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const loading = ref(true);

/** 查询设备表列表 */
function getList() {
  loading.value = true;
  let val = getDay(-1,'-');
  listDaily(val).then(response => {
    response.data.forEach((m) => {
      let first = [];
      let second = [];
      first.cycle = '本周期';
      first.id = m.id;
      first.deviceName = m.deviceName;
      first.morningShift = m.currentMorningFlow;
      first.middleShift = m.currentNoonFlow;
      first.eveningShift = m.currentNightFlow;
      first.day = m.currentDayFlow;
      first.month = m.currentMonthFlow;
      first.year = m.currentYearFlow;

      second.cycle='上周期';
      second.id = m.id;
      second.deviceName = m.deviceName;
      second.morningShift = m.lastMorningFlow;
      second.middleShift = m.lastNoonFlow;
      second.eveningShift = m.lastNightFlow;
      second.day = m.lastDayFlow;
      second.month = m.lastMonthFlow;
      second.year = m.lastYearFlow;

      dataList.value.push(first);
      dataList.value.push(second);
    });

    loading.value = false;
  });
}

function getDay(num, str) {
  let today = new Date();
  let nowTime = today.getTime();
  let ms = 24*3600*1000*num;
  today.setTime(parseInt(nowTime + ms));
  let oYear = today.getFullYear();
  let oMoth = (today.getMonth() + 1).toString();
  if (oMoth.length <= 1) oMoth = '0' + oMoth;
  let oDay = today.getDate().toString();
  if (oDay.length <= 1) oDay = '0' + oDay;
  return oYear + str + oMoth + str + oDay;
}

function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0|| columnIndex === 1) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

function emptyIsZero(row, column, cellValue, index){
  if (cellValue === '' || cellValue === null || cellValue === 'null' || cellValue === undefined){
    return 0 +' 吨'
  } else {
    return cellValue +' 吨'
  }
}

getList();
</script>
